<template>
    <div class="item-content" style="height:100%;display:flex">

        <div id="bizStatisticsChart" style="width:100%;height: 300px"></div>
    </div>
</template>
<script>
import { accountBalanceData,getCnaps2TransactionSummary } from '@/api/cnaps/dashboard/index'
import { listPageMixin } from '@/libs/listPageMixin'
import echarts from 'echarts';
export default {
    name: 'BizStatistics',
    mixins: [ listPageMixin ],
    data() {
        return {

        }
    },
    mounted() {
      getCnaps2TransactionSummary().then(res => {
        console.log(res)
        this.drawChat(res.result.map(x=>x.pkgno),res.result.map(x=>x.transCount),res.result.map(x=>x.transAmount))
      })
        // accountBalanceData().then(res => {
        //     let amountArray = [];
        //     let timeArray = [];
        //     if(res.result) {
        //
        //         amountArray = res.result.map(x => (x.amount / 100).toFixed(2))
        //         timeArray = res.result.map(x => x.time)
        //         this.drawChat(timeArray,amountArray)
        //     }
        // })
    },
    methods: {
        drawChat(nameArray,countArray,amountArray) {
          console.log('nameArray',nameArray)
          let cdata= {
              data1: ["交易笔数", "金额"],
              data2: nameArray,//['上海', '深圳', '广州', '北京', '成都', '大连', '福州', '杭州', '青岛', '沈阳', '苏州', '天津', '无锡', '武汉'],
              data3: countArray, //[19, 29, 39, 81,19, 29, 39, 81,19, 29, 39, 81,19, 29],
              // data4: amountArray,//[12, 23, 35, 100,12, 23, 35, 100,12, 23, 35, 100,12, 23]
          }

          var newData = cdata;

        // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
        let myChart = echarts.init(document.getElementById("bizStatisticsChart"));
        // 指定图表的配置项和数据
        let option = {
          legend: {
            data: newData.data1,
          },
          // barWidth: '30%',

          xAxis: {
            type: 'category',
            data: newData.data2,

          },
          yAxis: {
            type: 'value',

          },
          series: [{
            type: 'bar',
            name: "交易笔数",
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            itemStyle: {
              normal: {
                color: "#0052d9",
                barBorderRadius: 0,
                label: {
                  show: true,
                  position: "top",
                  formatter: function (p) {
                    return p.value > 0 ? p.value : "";
                  },
                },
              },
            },
            data: newData.data3
          },
            // {
            //   type: 'bar',
            //   name: "金额",
            //   markPoint: {
            //     data: [
            //       { type: 'max', name: 'Max' },
            //       { type: 'min', name: 'Min' }
            //     ]
            //   },
            //   itemStyle: {
            //     normal: {
            //       color: "#ED7B2F",
            //       barBorderRadius: 0,
            //       label: {
            //         show: true,
            //         position: "top",
            //         formatter: function (p) {
            //           return p.value > 0 ? p.value : "";
            //         },
            //       },
            //     },
            //   },
            //   data: newData.data4
            // }
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        }
    }
}
</script>
